<!DOCTYPE html>
<html>
<head>
    <title>MUKEFILE上传文件</title>
    <meta charset="utf-8">
    <link href="/lib/img/favicon.png" rel="shortcut icon" />
    <!--为了保证IE能够使用最新渲染模式而不是兼容模式-->
    <link rel="stylesheet" href="/layui/css/layui.css">
    <script src="/layui/layui.js"></script>
    <!-- ZUI CSS 文件 -->
    <link rel="stylesheet" href="/zui/css/zui.min.css">
    <!-- ZUI Javascript 依赖 jQuery -->
    <script src="/zui/libs/jquery/jquery.js"></script>
    <!-- ZUI JavaScript 文件 -->
    <script src="/zui/js/zui.min.js"></script>
    <link href="/zui/libs/uploader/zui.uploader.min.css" rel="stylesheet">
    <script src="/zui/libs/uploader/zui.uploader.min.js"></script>

    <style>
        .main{width: 100%;min-width: 540px;height: 100vh;}
        .main-top{height: 80px;background-color: #3280fc;}
        /*系统logo 标题*/
        .main-title{padding-left: 50px;line-height: 80px;
            float: left;font-size: 40px;font-family: Poppins;}
        /*登录系统的用户*/
        .user-info{float: right;font-size: 20px;
            padding:30px 120px 30px 0;}
        .user{ float:left;}
        /*    头部样式  end      */
        .main-middle{width: 100%;}
        /*   左侧菜单列表样式	start	*/
        .main-middle-left{width: 200px; top: 80px; bottom: 40px;
            background-color: #f7f7f7; position: absolute;}
        .main-middle-left ul li{line-height: 40px;}
        .main-middle-right{position: absolute;left: 200px; right: 0;bottom: 40px;
            top:80px;}
        /*底部声明*/
        .main-bottom{width: 100%;height: 40px;clear: both;
            bottom: 0px; position: absolute;}
        .main-bottom-info{height: 40px;background-color: #c7cbd0;
            line-height: 40px;text-align: center;}
        .bottom{width: 100%;height: 40px;clear: both;
            bottom: 0;position: absolute;}
        .bottom-info{height: 40px;background-color: #c7cbd0;
            line-height: 40px;text-align: center;}
        /***首页部分样式表-结束***/

        #file-list-content{
            width: 95%;
            height: 90%;
            /*background-color: aqua;*/
        }
        #my-file{ padding: 10px 5px 5px 20px;}
        #my-file-title{
            font-size: 16px;font-family: Poppins;
        }
        #my-file-content{
            padding: 5px 5px 0 20px;
            width: 100%;
            height: 90%;
            /*background-color: #00FF00;*/
        }
        #muke-file-content-table{

        }
        /*#upload-content{*/
        /*    width: 90%;*/
        /*    margin-left: 5%;margin-top: 2%;*/
        /*    margin-bottom: 3%;*/
        /*}*/

        /*#uploaderComponent{*/
        /*    width: 90%;*/
        /*    height: 76%;*/
        /*    position: absolute;*/
        /*    !*background-color: #0C0C0C;*!*/
        /*}*/
        /*#file-grid{*/
        /*    height: 90%;*/
        /*    overflow: auto;*/
        /*}*/
        /*#upload-title{*/
        /*    font-family: Poppins;font-size: 16px;*/
        /*    margin-bottom: 10px;*/
        /*}*/




    </style>
    <script type="text/javascript">

    </script>
</head>
<body>
<div class="main">

    <#include "common/top.ftl"/>


    <div class="main-middle">

        <#include "common/leftMenu.ftl"/>

        <div class="main-middle-right">
            <div id="file-list-content">
                <div id="my-file">
                    <span id="my-file-title">我的文件</span>
                </div>
                <div id="my-file-content">

                    <div id="muke-file-content-table">
                        <table id="demo" lay-filter="test"></table>
                        <script type="text/html" id="toolbarDemo">
                            <div class="layui-btn-container">
                                <button class="layui-btn layui-btn-sm" lay-event="addFolder">
                                    <i class="layui-icon layui-icon-add-circle"></i>新建文件夹</button>
                                <button class="layui-btn layui-btn-sm" lay-event="upload">
                                    <i class="layui-icon layui-icon-upload"></i>上传</button>
                                <button class="layui-btn layui-btn-sm" lay-event="share">
                                    <i class="layui-icon layui-icon-share"></i>分享</button>
                                <button class="layui-btn layui-btn-sm" lay-event="delete">
                                    <i class="layui-icon layui-icon-delete"></i>删除</button>
                            </div>
                        </script>
                        <script type="text/html" id="barDemo">
                            <a class="layui-btn layui-btn-xs" lay-event="rename">
                                <i class="layui-icon layui-icon-edit"></i>重命名</a>
                            <a class="layui-btn layui-btn-xs" lay-event="download">
                                <i class="layui-icon layui-icon-download-circle"></i>下载</a>
                        </script>
                        <script>
                            let parentFolderId = -1;
                            let currentFolderId = -1;
                            let currentPage = 1;
                            function getFolderById() {
                                $.ajax({
                                    url:'/userFile!getFolderById',
                                    data:{
                                        // 将父id当做当前目录id
                                        id:parentFolderId
                                    },
                                    dataType:'json',
                                    success:function (result){
                                        if (result === "error"){
                                            layer.msg('查询失败', {icon: 2});
                                        } else {
                                            parentFolderId = result.parentFolderId;
                                            currentFolderId = result.id;
                                            setTitle(result.folderName);
                                        }
                                    }
                                });
                            }
                            /**
                             * 设置标题
                             */
                            function setTitle(title) {
                                const ele = '<i class="layui-icon layui-icon-return" style="cursor: pointer;"'+
                                    ' onclick="returnParentFolder()"></i> ';
                                // 设置标题
                                $('#my-file-title').html(ele+title);
                            }
                            /**
                             * 返回上一级目录
                             */
                            function returnParentFolder() {
                                if (parentFolderId !== -1){
                                    getFolderById();
                                } else {
                                    // 设置标题
                                    $('#my-file-title').html('我的文件');
                                }
                                // 查询上一级目录
                                let table = layui.table;
                                table.reload('fileTable',{
                                    url:'/userFile!queryFileList',
                                    where:{
                                        parentFolderId:parentFolderId
                                    },
                                    page:{
                                        curr:currentPage
                                    }
                                });
                            }
                            /**
                             * 新增文件夹
                             */
                            function addFolder(folderName,table) {

                                $.ajax({
                                    url:'/userFile!addFolder',
                                    data:{
                                        folderName:folderName,
                                        parentFolderId:currentFolderId
                                    },
                                    dataType:'json',
                                    success:function (result){
                                        table.reload('fileTable',{
                                            where:{
                                                parentFolderId:currentFolderId
                                            },
                                            page:{
                                                curr:1
                                            }
                                        });
                                        if (result === "ok"){
                                            layer.msg('文件夹创建成功', {icon: 1});
                                        } else {
                                            layer.msg('文件夹创建失败', {icon: 2});
                                        }
                                    }
                                });
                            }
                            /**
                             *  重命名
                             */
                            function rename(id,name,type,obj) {
                                $.ajax({
                                    url:'/userFile!rename',
                                    data:{
                                        id:id,
                                        name:name,
                                        type:type
                                    },
                                    dataType: 'json',
                                    success:function (result){
                                        if (result === 'ok'){
                                            obj.update({
                                                name: name
                                            });
                                            layer.msg('重命名成功', {icon: 1});
                                        }else {
                                            layer.msg('重命名失败', {icon: 2});
                                        }
                                    }
                                });
                            }

                            /**
                             * 进入文件夹
                             * @param data
                             * @param table
                             */
                            function enterFolder(data,table) {
                                // 获取当前目录的父目录id
                                parentFolderId = data.pid;
                                currentFolderId = data.id;
                                // 设置标题
                                setTitle(data.name);
                                // 查询当前目录下的文件及文件夹
                                table.reload('fileTable',{
                                    url:'/userFile!queryFileList',
                                    where:{
                                        parentFolderId:data.id
                                    },
                                    page:{
                                        curr:1
                                    },
                                    done: function(res, curr, count){
                                        //如果是直接赋值的方式，res即为：{data: [], count: 99}
                                        // data为当前页数据、count为数据总长度
                                        //console.log(res);
                                        //得到当前页码
                                        //得到数据总量
                                        //console.log(count);
                                    }
                                });
                            }

                            /**
                             * 文件下载
                             * @param data
                             */
                            function download(data){
                                window.location.href = '/muekDownload!downloadFile?id='+data.id+'&filename='+data.name;
                            }
                            function deleteFile(checkStatus,table){
                                let data = checkStatus.data;
                                $.ajax({
                                    url:'/userFile!deleteFile',
                                    data:{
                                        deleteFiles:JSON.stringify(data)
                                    },
                                    type:'POST',
                                    dataType: 'json',
                                    success:function (result){
                                        if (result === 'ok'){
                                            // 刷新表格
                                            table.reload('fileTable',{
                                                url:'/userFile!queryFileList'
                                            });
                                            layer.msg('删除成功', {icon: 1});
                                        }else {
                                            layer.msg('删除失败', {icon: 2});
                                        }
                                    }
                                });
                                layer.closeAll();
                            }
                            layui.use('table', function(){
                                let table = layui.table;
                                table.render({
                                    id: 'fileTable',
                                    elem: '#demo',
                                    url:'/userFile!queryFileList',
                                    toolbar: '#toolbarDemo',
                                    cellMinWidth: 80,
                                    height:400,
                                    page:true,
                                    cols: [[
                                        {type:'checkbox',width: '5%',minWidth:80},
                                        // {field:'id', width:80, title: 'ID', sort: true},
                                        {field:'name', width:'30%', title: '名称',event:'enterFolder', style:'cursor: pointer;color:red;'},
                                        {field:'size', width:'20%', title: '大小', sort: false},
                                        {field:'updateTime', width:'20%', title: '更新时间', sort: false},
                                        {fixed: 'right',title:'操作', width:'25%',minWidth: 160,toolbar: '#barDemo',align:'center'}
                                    ]],
                                    done:function (res, curr, count){
                                        currentPage = curr;
                                        console.log(curr)
                                    }
                                });
                                // 头部事件监听
                                table.on('toolbar(test)', function(obj){
                                    let checkStatus = table.checkStatus(obj.config.id);
                                    switch(obj.event){
                                        case 'addFolder':
                                            // layer.msg('新建文件夹');
                                            // 新建文件夹操作
                                            layer.prompt({
                                                title:'新建文件夹',
                                                formType: 2
                                            }, function(value, index){
                                                // 发送新增文件夹的请求
                                                addFolder(value,table);
                                                layer.close(index);
                                            });
                                            break;
                                        case 'upload':
                                            layer.open({
                                                title:'上传文件',
                                                type:1,
                                                area: ['750px', '400px'],
                                                content:$('#uploaderComponent'),
                                            });
                                            break;
                                        case 'share':
                                            // 共享文件
                                            if (checkStatus.data.length===0){
                                                layer.msg('未选中文件', {icon: 2});
                                                return;
                                            }
                                            layer.msg("共享");
                                            break;
                                        case 'delete':
                                            // 删除操作
                                            if (checkStatus.data.length===0){
                                                layer.msg('未选中文件', {icon: 2});
                                                return;
                                            }
                                            layer.confirm('是否删除选中的数据', {
                                                btn: ['删除','取消']
                                            }, function(){
                                                // 删除文件及文件夹
                                                deleteFile(checkStatus,table);
                                            }, function(){
                                                layer.msg('取消删除', {icon: 2});
                                            });
                                            break;
                                    }
                                });
                                // 监听行工具事件
                                table.on('tool(test)', function(obj){
                                    // 获取行数据
                                    let data = obj.data;
                                    if(obj.event === 'rename'){
                                        layer.prompt({
                                            title:'重命名',
                                            formType: 2,
                                            value: data.name
                                        }, function(value, index){
                                            rename(data.id,value,data.type,obj);
                                            layer.close(index);
                                        });
                                    } else if(obj.event === 'enterFolder'){
                                        // 进入文件夹

                                        if (data.type === 'folder'){
                                            // 文件夹
                                            enterFolder(data,table);
                                        } else {
                                            // 文件
                                        }

                                    } else if(obj.event === 'download'){
                                        console.log(data);
                                        if (data.type === 'folder'){
                                            layer.msg('文件夹不能下载', {icon: 2});
                                        } else {
                                            download(data);
                                        }
                                    }
                                });
                            });



                        </script>
                    </div>
                    <#--引入上传组件-->
                    <#include "component/upload_component.ftl"/>

                </div>

<#--                <div id="upload-title">-->
<#--                    <span>文件上传</span>-->
<#--                </div>-->
<#--                <div id='uploaderComponent' class="uploader" data-ride="uploader">-->
<#--                    <div class="uploader-actions">-->
<#--                        <div class="uploader-status pull-right text-muted"></div>-->
<#--                        <button type="button" class="btn btn-link uploader-btn-browse"><i class="icon icon-plus"></i> 选择文件</button>-->
<#--                        <button type="button" class="btn btn-link uploader-btn-start"><i class="icon icon-cloud-upload"></i> 开始上传</button>-->
<#--                    </div>-->
<#--                    <div class="uploader-message text-center">-->
<#--                        <div class="content"></div>-->
<#--                        <button type="button" class="close">×</button>-->
<#--                    </div>-->
<#--                    <div id="file-grid" class="uploader-files file-list file-list-lg" data-drag-placeholder="请拖拽文件到此处"></div>-->
<#--                </div>-->



            </div>
        </div>
    </div>

    <#include "common/bottom.ftl"/>
</div>
</body>
</html>